<template>
  <view class="page" :data-theme="globPrimary">
    <u-navbar title="详情" :title-bold="true" :title-color="'#303133'"></u-navbar>
    <view class="dynamicItem">
      <view class="dynamicItem-head" @click="bindToLink(detail.user_id)">
        <u-avatar :src="detail.avatar_url" size="64"></u-avatar>
        <view class="dynamicItem-head-right">
          <view class="dynamicItem-head-right-head">
            <view class="dynamicItem-head-right-head-left">
              <view class="dynamicItem-head-right-head-left-name u-line-1">{{
                detail.nick_name
              }}</view>
              <view class="dynamicItem-head-right-head-left-time">
                <view>{{ detail.create_time | handleTime }}</view>
                <view
                  v-if="userInfo.id == detail.user_id"
                  @click.stop="handleDeleteCircle(detail.id)"
                  class="dynamicItem-head-right-head-left-time-del"
                  >删除</view
                >
              </view>
            </view>
            <view v-if="userInfo.id != detail.user_id">
              <view
                class="dynamicItem-head-right-head-right"
                :style="{
                  borderColor: globPrimaryColor,
                }"
                v-if="detail.followed == 0"
                @click.stop="bindFollow(detail.user_id)"
              >
                <u-icon name="plus" :color="globPrimaryColor" size="18"></u-icon
                ><label
                  class="lab_g"
                  :style="{
                    color: globPrimaryColor,
                  }"
                  >关注</label
                >
              </view>
              <view
                class="dynamicItem-head-right-head-right addfont"
                v-if="detail.followed == 1"
                @click.stop="bindDelFollow(detail.user_id)"
              >
                <label class="lab_g">已关注</label>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="dynamicItem-artic">{{ detail.content }}</view>
      <view class="dynamicItem-image" v-if="detail.attach_url.length == 1">
        <courseImage
          width="400"
          height="400"
          @click="previewImg(detail.attach_url, 0)"
          :image="detail.attach_url[0]"
        >
        </courseImage>
      </view>
      <view class="dynamicItem-someImages" v-else-if="detail.attach_url.length > 1">
        <image
          class="images"
          @click="previewImg(detail.attach_url, index)"
          v-for="(i, index) in detail.attach_url"
          :key="index"
          :style="{ marginRight: (index + 1) % 3 == 0 ? '0rpx' : '' }"
          :src="i"
        ></image>
      </view>
      <view class="dynamicItem-forward" v-if="detail.type == 2">
        <view
          v-if="[detail.orignal_attach, detail.orignal_content, detail.orignal_user].includes(null)"
          class="dynamicItem-forward-del"
          >该内容已被删除，无法查看。</view
        >
        <view v-else>
          <view class="dynamicItem-forward-headtxt">
            <text class="dynamicItem-forward-headtxt-name">@{{ detail.orignal_user }}:</text>
            <text class="dynamicItem-forward-headtxt-msg">{{ detail.orignal_content }}</text>
          </view>
          <view class="dynamicItem-forward-img" v-if="detail.orignal_attach.length == 1">
            <image class="img" :src="detail.orignal_attach[0]"></image>
          </view>
          <view class="dynamicItem-forward-someImg" v-else-if="detail.orignal_attach.length > 1">
            <image
              class="imgs"
              v-for="(item, index) in detail.orignal_attach"
              :key="index"
              :style="{
                marginRight: (index + 1) % 3 == 0 ? '0rpx' : '',
              }"
              :src="item"
            ></image>
          </view>
        </view>
      </view>
      <view class="dynamicItem-iconItem">
        <view class="dynamicItem-iconItem-view" @click="bindForward">
          <u-icon name="zhuanfa" color="#909399" size="40"></u-icon>
          <label style="margin-left: 8rpx; line-height: 40rpx">{{ detail.recircle_num }}</label>
        </view>
        <view class="dynamicItem-iconItem-view">
          <u-icon
            name="thumb-up"
            v-if="detail.is_like == 0"
            color="#909399"
            size="40"
            @click="bindThumb(detail.id, 1, 1)"
          ></u-icon>
          <u-icon
            name="thumb-up-fill"
            :color="globPrimaryColor"
            size="40"
            @click="bindThumb(detail.id, 0, 1)"
            v-else-if="detail.is_like == 1"
          ></u-icon>
          <label style="margin-left: 8rpx; line-height: 40rpx">{{ detail.like_num }}</label>
        </view>
      </view>
    </view>

    <view class="replay">
      <view class="replay-nums">共{{ detail.comment_num }}条回复</view>
      <view class="replay-item" v-for="(i, index) in comment.data" :key="index">
        <u-avatar :src="i.avatar_url" size="64" @click="bindToLink(i.user_id)"></u-avatar>
        <view class="replay-item-right">
          <view class="replay-item-right-name">{{ i.nick_name }}</view>
          <text class="replay-item-right-pinlun" @click="bindRepay(i.id, i.user_id, i.nick_name)">
            <text v-if="i.reply_user_name != null">回复</text>
            <text v-if="i.reply_user_name != null" class="replay-item-right-pinlun-user"
              >@{{ i.reply_user_name }}:</text
            >
            <text>{{ i.content }}</text>
          </text>
          <view class="replay-item-right-image" v-if="i.attach_url.length == 1">
            <courseImage width="186" height="186" :image="i.attach_url[0]"></courseImage>
          </view>
          <view class="replay-item-right-someimgs" v-else-if="i.attach_url.length > 1">
            <image
              class="images"
              v-for="(img, index2) in i.attach_url"
              :key="index2"
              :style="{
                marginRight: (index2 + 1) % 3 == 0 ? '0rpx' : '',
              }"
              :src="img"
            ></image>
          </view>
          <view class="replay-item-right-bottom">
            <view class="replay-item-right-bottom-left">
              <view class="replay-item-right-bottom-left-time">{{
                i.create_time | handleTime
              }}</view>
              <view
                class="replay-item-right-bottom-left-del"
                @click="handleDeleteComment(i.id)"
                v-if="detail.user_id == userInfo.id || i.user_id == userInfo.id"
                >删除</view
              >
            </view>
            <view class="replay-item-right-bottom-right">
              <u-icon
                name="thumb-up"
                v-if="i.is_like == 0"
                color="#909399"
                size="36"
                @click="bindThumb(i.id, 1, 2)"
              ></u-icon>
              <u-icon
                name="thumb-up-fill"
                :color="globPrimaryColor"
                size="40"
                @click="bindThumb(i.id, 0, 2)"
                v-else-if="i.is_like == 1"
              ></u-icon>
              <label style="margin-left: 8rpx; line-height: 30rpx">{{ i.like_num }}</label>
            </view>
          </view>
        </view>
      </view>
      <edu-empty v-if="isDataEmpty"></edu-empty>
    </view>

    <u-gap height="100" bgColor="transparent"></u-gap>

    <view class="circle-comment-wrap" :style="{ 'padding-bottom': keyboardheight + 10 + 'px' }">
      <view class="comment-box">
        <edu-upload
          ref="uUpload"
          :value.sync="attachList"
          :args="{
            width: '100rpx',
            header: '100rpx',
            count: 9,
            customBtn: true,
            showUploadList: false,
          }"
          @on-list-change="onListChange"
        >
          <view slot="addBtn">
            <u-image width="40rpx" height="40rpx" src="@/pageFound/static/images/img_icon.png">
            </u-image>
          </view>
        </edu-upload>
        <view class="input-warp">
          <textarea
            class="textarea"
            :value="textvalue"
            placeholder-class="placeholder edu-icon edu-icon-home_edit_icon"
            :placeholder="placeholder"
            :show-confirm-bar="false"
            :adjust-position="false"
            :maxlength="200"
            :auto-height="true"
            @focus="questionFocus"
            @blur="questionBlur"
            @input="questionInput"
          />
        </view>
        <edu-button
          type="primary"
          size="medium"
          shape="circle"
          :disabled="textvalueDisabled"
          @click="handleCommentSubmit"
          >发送</edu-button
        >
      </view>
      <view class="attach-wrap">
        <view class="attach-item" v-for="(item, index) in attachImg" :key="index">
          <image class="attach-item-image" :src="item.url" mode="aspectFill"></image>
          <view class="u-delete-icon" @tap.stop="handleDeleteImage(index)">
            <u-icon name="close" size="12" color="#ffffff"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <edu-user-coupon></edu-user-coupon>

    <u-modal
      show-cancel-button
      v-model="deleteVisible"
      :show-title="false"
      cancel-text="取消"
      confirm-text="删除"
      :content="deleteContent"
      :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
      cancel-color="#606266"
      :confirm-color="globPrimaryColor"
      @confirm="handleDeleteConfirm"
    >
    </u-modal>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  data() {
    return {
      isDataEmpty: false,
      circle_id: 0,
      comment: {
        data: [],
      },
      detail: {
        attach_url: [],
        orignal_attach: [],
      },
      deleteVisible: false,
      deleteType: 0,
      deleteContent: '',
      deleteCurrentId: 0,

      keyboardheight: 0,
      textvalue: '',
      attachImg: [],
      attachList: [],
      placeholder: '说点什么…',
      comment_id: 0,
      replay_user_id: 0,
    }
  },
  filters: {
    handleTime(timeStamp) {
      if (timeStamp > 0) {
        var date = new Date()
        date.setTime(timeStamp * 1000)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = date.getDate()
        d = d < 10 ? '0' + d : d
        var h = date.getHours()
        h = h < 10 ? '0' + h : h
        var minute = date.getMinutes()
        var second = date.getSeconds()
        minute = minute < 10 ? '0' + minute : minute
        second = second < 10 ? '0' + second : second
        return y + '年' + m + '月' + d + '日'
      } else {
        return ''
      }
    },
    handleDay(remain) {
      if (remain) {
        var h =
          Math.floor(remain / 3600) < 10
            ? '0' + Math.floor(remain / 3600)
            : Math.floor(remain / 3600)
        return Math.ceil(h / 24)
      } else {
        return 0
      }
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
    textvalueDisabled() {
      return this.$u.trim(this.textvalue).length == 0
    },
  },
  onLoad(option) {
    this.circle_id = option.circle_id
  },
  onShow() {
    this.getDetail(this.circle_id)
  },
  methods: {
    getDetail(circle_id) {
      this.$edu.api
        .getCircleDetail({
          circle_id: circle_id,
        })
        .then((res) => {
          const { data } = res
          this.comment = data.comment
          this.detail = data.detail
          if (this.comment.data.length == 0) {
            this.isDataEmpty = true
          } else {
            this.isDataEmpty = false
          }
        })
    },
    bindToLink(id) {
      this.$edu.route('/pageFound/user/index', {
        id: id,
      })
    },
    // 关注
    bindFollow(_id) {
      this.$edu.api
        .getUserFollow({
          user_id: _id,
        })
        .then((res) => {
          if (res.code == 1) {
            this.detail.followed = 1
          } else {
            this.$u.toast(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 取消关注
    bindDelFollow(_id) {
      this.$edu.api
        .getUserDelFollow({
          user_id: _id,
        })
        .then((res) => {
          if (res.code == 1) {
            this.detail.followed = 0
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    // 查看图片
    previewImg(imgs, _index) {
      uni.previewImage({
        urls: imgs,
        current: _index,
      })
    },
    delMeth(_id) {
      this.$edu.api
        .deleteCicle({
          id: _id,
        })
        .then((res) => {
          this.$u.route({
            url: '/pageFound/circle/index',
            type: 'redirectTo',
          })
        })
    },
    // 回复评论
    bindRepay(_id, _user_id, _user_name) {
      if (this.userInfo.id == _user_id) return
      this.$edu.judgeLogin(() => {
        this.comment_id = _id
        this.replay_user_id = _user_id
        this.placeholder = '@' + _user_name
      })
    },
    // 删除圈子
    handleDeleteCircle(id) {
      this.deleteContent = '确认删除该条动态?'
      this.deleteType = 1
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 删除评论
    handleDeleteComment(id) {
      this.deleteContent = '确认删除该条评论?'
      this.deleteType = 2
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 确认删除
    handleDeleteConfirm() {
      if (this.deleteType == 1) {
        this.delMeth(this.deleteCurrentId)
      } else if (this.deleteType == 2) {
        this.$edu.api
          .deleteComment({
            id: this.deleteCurrentId,
          })
          .then((res) => {
            this.$u.toast(res.msg)
            if (res.code == 1) {
              let index = this.comment.data.findIndex((item) => item.id == this.deleteCurrentId)
              this.comment.data = this.comment.data.filter((item, key) => key != index)
              this.detail.comment_num--
              if (this.comment.data.length == 0) {
                this.isDataEmpty = true
              } else {
                this.isDataEmpty = false
              }
            }
          })
      }
    },
    // 转发圈子
    bindForward() {
      this.$u.route('/pageFound/circle/forwardCircle', {
        orignal_id: this.detail.id,
        owner_id: this.detail.user_id,
      })
    },
    // 圈子点赞
    bindThumb(_id, _status, _type) {
      var that = this
      this.$edu.api
        .postCircleLike({
          type: _type,
          obj_id: _id,
          status: _status,
        })
        .then((res) => {
          if (res.code == 1) {
            if (_type == 1) {
              if (_status == 1) {
                that.detail.is_like = 1
                that.detail.like_num++
              } else if (_status == 0) {
                that.detail.is_like = 0
                that.detail.like_num--
              }
            } else {
              if (_status == 1) {
                that.comment.data.forEach((el) => {
                  if (_id == el.id) {
                    el.is_like = 1
                    el.like_num++
                  }
                })
              } else if (_status == 0) {
                that.comment.data.forEach((el) => {
                  if (_id == el.id) {
                    el.is_like = 0
                    el.like_num--
                  }
                })
              }
            }
          }
        })
        .catch((err) => {
          that.$u.toast('操作频繁，请稍后重试')
        })
    },
    questionFocus(e) {
      this.keyboardheight = e.detail.height
    },
    questionBlur() {
      this.keyboardheight = 0
    },
    questionInput(e) {
      this.textvalue = e.detail.value
    },
    onListChange(lists) {
      this.attachImg = lists
    },
    handleDeleteImage(index) {
      this.attachList.splice(index, 1)
      this.$refs.uUpload.remove(index)
    },
    handleCommentSubmit() {
      //回复评论
      let params = {
        circle_id: this.circle_id,
        content: this.textvalue,
      }
      if (this.comment_id) {
        params = {
          ...params,
          comment_id: this.comment_id,
          reply_user_id: this.replay_user_id,
        }
      }
      if (this.attachList.length > 0) {
        params = {
          ...params,
          attach: String(this.attachList),
        }
      }
      this.$edu.api.postCircleComment(params).then((res) => {
        this.$u.toast(res.msg)
        this.textvalue = ''
        this.attachList = []
        this.attachImg = []
        this.comment_id = 0
        this.replay_user_id = 0
        this.placeholder = '说点什么…'
        this.getDetail(this.circle_id)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  background: #ffffff;
  min-height: 100vh;
}

.addfont {
  color: #909399 !important;
  border-color: #909399 !important;
}

.dynamicItem {
  height: auto;
  padding: 40rpx 30rpx 0 30rpx;
  overflow: hidden;
  border-bottom: 2rpx solid #f7f7f7;
  margin-bottom: 40rpx;

  &-head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    &-right {
      width: 602rpx;
      height: auto;
      margin-left: 24rpx;
      /* #ifndef APP-PLUS || MP-WEIXIN */
      background-color: white;
      /* #endif */

      &-head {
        height: 64rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;

        &-left {
          width: 60%;
          height: 100%;
          overflow: hidden;

          &-name {
            height: 26rpx;
            line-height: 26rpx;
            font-size: 28rpx;
            color: #303133;
          }

          &-time {
            height: 26rpx;
            font-size: 24rpx;
            color: #909399;
            margin-top: 10rpx;
            display: flex;

            &-del {
              margin-left: 34rpx;
            }
          }
        }

        &-right {
          margin-top: 11rpx;
          height: 42rpx;
          border: 2rpx solid #86b2ff;
          width: 94rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4rpx;

          .lab_g {
            font-size: 22rpx;
          }
        }
      }
    }
  }

  &-artic {
    padding: 0 0rpx 0rpx 88rpx;
    font-size: 28rpx;
    color: #303133;
    line-height: 46rpx;
    letter-spacing: 1rpx;
    margin-top: 29rpx;
    margin-bottom: 24rpx;
  }

  &-image {
    padding: 0 0rpx 0rpx 88rpx;
    margin-bottom: 20rpx;
  }

  &-someImages {
    padding-left: 88rpx;
    display: flex;
    flex-wrap: wrap;

    .images {
      height: 186rpx;
      width: 186rpx;
      margin-right: 20rpx;
      margin-bottom: 22rpx;
    }
  }

  &-forward {
    height: auto;
    padding: 30rpx 0rpx 30rpx 88rpx;
    background: #f7f7f7;
    margin-bottom: 32rpx;

    &-del {
      font-size: 28rpx;
      color: #303133;
    }

    &-headtxt {
      width: 100%;
      font-size: 28rpx;
      letter-spacing: 1px;

      &-name {
        color: #5191ff;
      }

      &-msg {
        word-break: break-all;
        color: #303133;
      }
    }

    &-img {
      margin-top: 30rpx;

      .img {
        height: 400rpx;
        width: 400rpx;
        display: block;
      }
    }

    &-someImg {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;

      .imgs {
        height: 180rpx;
        width: 180rpx;
        margin-right: 20rpx;
        margin-top: 22rpx;
        display: block;
      }
    }
  }

  &-iconItem {
    height: 40rpx;
    padding: 0 20rpx 0rpx 88rpx;
    margin-top: 10rpx;
    margin-bottom: 25rpx;
    display: flex;
    justify-content: space-between;

    &-view {
      height: 40rpx;
      color: #909399;
    }
  }
}

.replay {
  height: auto;
  padding: 0 30rpx;

  &-nums {
    height: 45rpx;
    font-size: 32rpx;
    color: #303133;
    font-weight: bold;
    line-height: 45rpx;
  }

  &-item {
    width: 100%;
    display: flex;
    margin-top: 40rpx;

    &-right {
      width: 87%;
      margin-left: 24rpx;
      border-bottom: 1px solid #f7f7f7;

      &-name {
        height: 64rpx;
        width: 100%;
        line-height: 64rpx;
        font-size: 28rpx;
        color: #606266;
      }

      &-pinlun {
        width: 100%;
        height: auto;
        font-size: 28rpx;
        color: #303133;
        letter-spacing: 1rpx;
        word-break: break-all;

        &-user {
          color: #5191ff;
        }
      }

      &-image {
        margin-top: 24rpx;
      }

      &-someimgs {
        display: flex;
        flex-wrap: wrap;
        margin-top: 24rpx;

        .images {
          height: 186rpx;
          width: 186rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }
      }

      &-bottom {
        margin-top: 24rpx;
        height: 30rpx;
        overflow: hidden;
        margin-bottom: 25rpx;
        display: flex;
        justify-content: space-between;

        &-left {
          display: flex;
          height: 100%;
          width: 50%;
          font-size: 24rpx;
          line-height: 30rpx;

          &-time {
            color: #909399;
          }

          &-del {
            color: #606266;
            margin-left: 24rpx;
          }
        }

        &-right {
          display: flex;
          font-size: 24rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}

.circle-comment-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 999;
  padding: 20rpx 30rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.06);
  .comment-box {
    display: flex;
    align-items: center;
    .input-warp {
      flex: 1;
      margin-left: 24rpx;
      margin-right: 24rpx;
      padding: 0 24rpx;
      background: #f7f7f7;
      border-radius: 36rpx;
      .textarea {
        width: 100%;
        padding: 20rpx 0;
        font-size: 26rpx;
        font-weight: 400;
        color: #303133;
      }
      ::v-deep .placeholder {
        font-size: 26rpx;
        font-weight: 400;
        color: #b7bac1;
        display: flex;
        align-items: center;
        &:before {
          margin-right: 16rpx;
          font-size: 24rpx;
        }
      }
    }
    ::v-deep .edu-btn {
      width: 120rpx;
      padding: 0;
    }
  }
  .attach-wrap {
    display: flex;
    flex-wrap: wrap;
    .attach-item {
      flex: 0 0 70rpx;
      height: 70rpx;
      position: relative;
      margin-top: 20rpx;
      margin-right: 32rpx;
    }
    .attach-item-image {
      width: 100%;
      height: 70rpx;
      border-radius: 8rpx;
    }
    .u-delete-icon {
      position: absolute;
      top: -8rpx;
      right: -8rpx;
      z-index: 10;
      background: rgba(48, 49, 51, 0.5);
      border-radius: 100rpx;
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
